<template>
    <div class="components-container">

        <el-form :model="query" ref="query" label-width="80px" :inline="true" size="mini" :rules="rule">
            <el-form-item label="时间" prop="createTime">
                <el-date-picker v-model="query.createTime" type="date" value-format="yyyyMMdd" placeholder="选择日期时间">
                </el-date-picker>

            </el-form-item>
            <el-form-item label="手机号码" prop="destMobiles">
                <el-input v-model="query.destMobiles"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" border stripe v-loading="loading">
            <el-table-column prop="sendDate" label="发送时间">
            </el-table-column>
            <el-table-column prop="content" label="内容">
            </el-table-column>
            <el-table-column prop="errCode" label="错误码">
            </el-table-column>
            <el-table-column prop="phoneNum" label="手机号">
            </el-table-column>
            <el-table-column prop="receiveDate" label="收短信日期">
            </el-table-column>
        </el-table>

    </div>
</template>
<script>
import { getMsgList } from '@/api/searchMsg'
export default {
    name: 'messageSearch',
    data() {
        return {
            loading: false,
            list: [],
            query: {
                createTime: '',
                destMobiles: '',
            },
            total: 0,
            rule: {
                createTime: [
                    { required: true, message: '请选择日期', trigger: 'blur' }
                ],
                destMobiles: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        let day = new Date();
        let yeah = day.getFullYear();
        let month = day.getMonth() + 1;
        let today = day.getDate();
        if (month < 10) {
            month = '0' + month;
        }
        if (today < 10) {
            today = '0' + today
        }

        this.query.createTime = yeah + "-" + month + "-" + today;
    },
    methods: {
        async getList() {
            if (this.query.createTime.indexOf('-')) {
                let ss = this.query.createTime.replace('-', '');
                this.query.createTime = ss.replace('-', '');
            }
            const res = await getMsgList(this.query);
            if (res.code === 200) {
                this.list = res.data.list;
                this.total = res.data.totalCount;
                this.loading = false;
            } else {
                this.loading = false;
            }
        },
        onSubmit() {
            this.loading = true;
            this.$refs['query'].validate((valid) => {
                if (valid) {
                    this.getList();
                } else {
                    console.log('error submit!!');
                    this.loading = false;
                    return false;
                }
            });

        }
    }
}
</script>
<style lang="scss" scoped>
.el-form .el-input,
.el-form .el-textarea,
.el-form .el-select,
.el-form .el-date-editor {
  width: auto !important;
}
</style>

